<template>
  <div>
    <div class="title">
      <Button color="green" @click="addMainCate">添加一级分类</Button>
      <Button @click="expandAll">全部展开</Button
      ><Button @click="foldAll">全部折叠</Button>
    </div>
    <!-- 数据展示 -->
    <div class="main">
      <Table ref="table" :datas="list" :loading="loading" :border="true">
        <TableItem
          title="序号"
          :width="120"
          align="center"
          prop="$serial"
        ></TableItem>
        <TableItem
          title="真实id"
          prop="id"
          align="center"
          :width="120"
        ></TableItem>
        <TableItem
          title="分类名称"
          prop="cate_name"
          treeOpener
          :width="200"
        ></TableItem>
        <TableItem
          title="图标"
          align="center"
          :width="200"
          prop="cate_logo"
        ></TableItem>
        <TableItem title="操作" align="center" :width="200" fixed="right">
          <template slot-scope="{ data }">
            <i
              v-tooltip
              placement="left"
              content="编辑该分类"
              class="h-btn h-btn-s h-btn-blue iconfont icon-icon-test3"
              @click="editor(data)"
            >
            </i>
            <i
              v-tooltip
              placement="top"
              content="新增子分类"
              class="h-btn h-btn-s h-btn-blue h-icon-plus"
              @click="addChildren(data.id)"
            >
            </i>
            <i
              v-tooltip
              placement="right"
              content="删除该分类"
              class="h-icon-trash h-btn h-btn-s h-btn-red"
              @click="del(data.id)"
            ></i>
          </template>
        </TableItem>
        <div slot="empty">暂时无数据</div>
      </Table>
    </div>
    <!-- 添加的dialog -->
    <Modal v-model="cateDialog">
      <div v-padding="10" class="h-modal-header text-right">
        <span
          class="blue-color"
          style="margin-right:200px;font-weight:"
          v-show="form.cate_parent"
          >添加子集分类</span
        >
        <Button
          :icon-circle="true"
          @click="closeCateDialog"
          icon=" h-icon-close"
          color="primary"
        ></Button>
      </div>
      <div
        style="width:470px;
      max-height: 400px;
      max-width:500px;
      min-width:450px;"
      >
        <Form
          mode="twocolumn"
          :label-width="90"
          :model="form"
          :rules="validationRules"
          ref="form"
          :top="0.2"
          showErrorTip
        >
          <FormItem single label="分类名称" prop="cate_name">
            <input
              style="width:300px"
              type="text"
              v-model="form.cate_name"
              placeholder="输入分类名称"
              v-wordlimit="20"
            />
          </FormItem>
          <FormItem
            class="text-left"
            style="height:140px"
            label="分类图片"
            prop="cate_logo"
          >
            <button @click="showImageChoose" class="h-btn h-btn-green">
              选择图片
            </button>
            <div class="logo" v-show="form.cate_logo">
              <img :src="form.cate_logo" />
              <i @click="removeLogo()" class="iconfont icon-shanchu "></i>
            </div>
          </FormItem>

          <FormItem :no-padding="true" style="text-align:left" single>
            <Button color="green" v-if="!isUpdate" @click="submit">提交</Button>
            <Button color="green" v-else @click="update">更新</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
    <!-- 图片选择dialog -->
    <Modal v-model="imageDialog" :hasCloseIcon="true">
      <div style="width:700px;max-width:730px;min-width:700px;">
        <ImageCheck :isShowCheckBtn="true" @choose="chooseImg" />
      </div>
    </Modal>
  </div>
</template>
 <script>
import ImageCheck from "@/components/ImageCheck/index.vue";

export default {
  name: "articleCate",
  components: { ImageCheck },
  data() {
    return {
      cateDialog: false,
      isUpdate: false,
      // 图片选择dialog
      imageDialog: false,
      loading: true,
      form: {
        cate_name: "",
        cate_logo: "",
        cate_parent: 0
      },
      validationRules: {
        required: ["cate_name"]
      },
      list: []
    };
  },
  methods: {
    // 清空数据
    emptyForm() {
      this.form.cate_name = "";
      this.form.cate_logo = "";
      this.form.cate_parent = 0;
    },
    // 关闭分类dialog
    closeCateDialog() {
      this.cateDialog = false;
      this.isUpdate = false;
      this.emptyForm();
    },
    // 添加图片
    chooseImg(e) {
      this.form.cate_logo = e.src;
    },
    // 显示图片dialog
    showImageChoose() {
      this.imageDialog = true;
    },
    // 添加一级分类
    addMainCate() {
      this.cateDialog = true;
    },
    // 增加子集分类
    addChildren(id) {
      this.cateDialog = true;
      this.form.cate_parent = id;
    },
    // 展开
    expandAll() {
      this.$refs.table.expandAll();
    },
    // 收起
    foldAll() {
      this.$refs.table.foldAll();
    },
    // 获取数据
    async getCateList() {
      this.loading = false;
      let res = await this.$get("/api/article/cate/list");
      if (res && res.code === 200) {
        this.list = res.data.list;
      } else {
        this.$Message.error("获取失败,请刷新重试");
      }
    },
    // 新建
    async submit() {
      let validResult = this.$refs.form.valid();
      if (validResult.result) {
        let res = await this.$post("/api/article/cate/create", {
          cate_name: this.form.cate_name,
          cate_logo: this.form.cate_logo,
          cate_parent: this.form.cate_parent
        });
        if (res && res.code === 200) {
          this.$Message.success("添加成功");
          this.emptyForm();
          this.cateDialog = false;
          this.getCateList();
        } else {
          this.$Message.error(res.message);
        }
      }
    },
    // 编辑
    async editor(data) {
      this.cateDialog = true;
      this.form.cate_name = data.cate_name;
      this.form.cate_logo = data.cate_logo;
      this.form.cate_parent = data.cate_parent;
      // 数据多用。直接就赋值了。反正最终判断也是根据true false。那么在关闭dialog时直接重置为false
      this.isUpdate = data.id;
    },
    async update() {
      if (this.form.cate_name === null) {
        this.$Message.error("分类名称不能为空");
      }
      let res = await this.$post(`/api/article/cate/update/${this.isUpdate}`, {
        cate_name: this.form.cate_name,
        cate_logo: this.form.cate_logo,
        cate_parent: this.form.cate_parent
      });
      if (res && res.code === 200) {
        this.$Message.success("更新成功");
        this.emptyForm();
        this.cateDialog = false;
        this.isUpdate = false;
        this.getCateList();
      } else {
        this.$Message.error(res.message);
      }
    },
    // 删除
    del(id) {
      this.$Confirm("确认删除？")
        .then(async () => {
          let res = await this.$post(`/api/article/cate/delete/${id}`);
          if (res && res.code === 200) {
            this.$Message.success("删除成功");
            this.getCateList();
          } else {
            this.$Message.error(res.message);
          }
        })
        .catch(() => {});
    }
  },
  mounted() {
    this.getCateList();
  }
};
</script>
<style lang="less" scoped>
.title,
.main {
  padding-left: 50px;
}
.title {
  margin-bottom: 20px;
}
.logo {
  margin-left: -30%;
  padding-top: 15px;
  height: 10px;
  text-align: center;

  i {
    font-size: 16px;
    color: #e11617;
  }
  img {
    margin: 0 10px;
    width: 80px;
    height: 80px;
  }
}
</style>